﻿@model thousandClear.Areas.Shop.Models.MainViewModel

@{
    ViewBag.Title = "积分商城";
}

@section Styles
{
    @Styles.Render("~/cssbundles/consumer/address")
    <link href="~/Statics/Styles/Shop/main.css?v=3" rel="stylesheet" />
}
@section Scripts
{
    @Scripts.Render("~/jsbundles/consumer/subscribe")
    <script src="~/Statics/Scripts/Shop/main.js?v=3"></script>
}

<div id="app">
    <table cellpadding="0px" cellspacing="0px" style="width: 100%; height: 120px; background-image: url('../Statics/Images/shop/main/top.jpg'); background-repeat: repeat;">
        <tr>
            <td rowspan="2" valign="middle" align="right" style="width: 40%">
                <img src="~/Statics/Images/shop/main/avatar.png" style="width: 80px; height: 80px; margin-right: 20px;" />
            </td>
            <td valign="bottom" align="left" style="width: 60%">
                <label style="font-size: 25pt; font-weight: bold; color: #ffec85; padding: 3px;">@Model.TotalPoint</label>
                <label style="font-size: 14px; color: #fff8ca; padding: 3px;">积分</label>
        </tr>
        <tr>
            <td valign="top" align="left" style="width: 65%">
                <label style="font-size: 14px; color: #fff8ca; padding: 3px;">下单就送服务积分</label>
        </tr>
    </table>

    <table cellpadding="0px" cellspacing="0px" style="width: 90%; height: 40px; margin: 0px auto; margin-top: 10px; border: 1px solid #acacac;">
        <tr>
            <td v-bind:class="{'selectTD':showGood, 'unselectTD':!showGood}" valign="middle" align="center" style="width: 33%; border-right: 1px solid #acacac;" v-on:tap="viewGood">
                <label style="font-size: 12px;">积分商城</label>
            </td>
            <td v-bind:class="{'selectTD':showPoint, 'unselectTD':!showPoint}" valign="middle" align="center" style="width: 34%; border-right: 1px solid #acacac;" v-on:tap="viewPoint">
                <label style="font-size: 12px;">积分明细</label>
            </td>
            <td v-bind:class="{'selectTD':showOrder, 'unselectTD':!showOrder}" valign="middle" align="center" style="width: 33%;" v-on:tap="viewOrder">
                <label style="font-size: 12px;">兑换记录</label>
            </td>
        </tr>
    </table>
    <div v-if="showGood" class="prod-list" v-if="showGood">
        <ul class="ui-list ui-list-function ui-border-tb">
            @foreach (var item in @Model.Goods)
            {
                <li class="ui-border-t">
                    <div class="ui-list-img">
                        <img src="@item.ImgUrl" width="100%" height="100%" />
                    </div>
                    <div class="ui-list-info">
                        <h5 class="ui-nowrap">@item.Name</h5>
                        @*<p class="ui-nowrap">这是内容，加ui-nowrap可以超出长度截断</p>*@
                        <h4 class="ui-nowrap prod-item-credit">@item.Credit 积分</h4>
                    </div>
                    <div class="ui-btn" v-on:tap="prod(@item.DSGID,'@Model.OpenId')">
                        兑换
                    </div>
                </li>
            }

        </ul>
    </div>

    <div class="point-detail" v-if="showPoint">
        @foreach (var item in @Model.Points)
        {
            <div class="point-item ui-row-flex ui-whitespace ui-border-b">
                <div class="ui-col ui-col-4 point-item-time">
                    @item.TimeStamp
                </div>
                @if (@item.UsePoint > 0)
                {
                    <div class="ui-col point-item-record point-item-decrease">
                        -@item.UsePoint.ToString("#0.00")
                    </div>
                }
                else
                {
                    <div class="ui-col point-item-record point-item-increase">
                        +@item.GetPoint.ToString("#0.00")
                    </div>
                }

            </div>
        }
    </div>

    <div class="order-list" v-if="showOrder">
        <ul class="ui-list ui-list-link">
            @foreach (var item in @Model.Orders)
            {
                <li class="ui-border-t order-item" v-on:tap="order(@item.OrderId,'@Model.OpenId')">
                    <div class="ui-avatar">
                        <img src="@item.GoodImgUrl" width="100%" height="100%" />
                    </div>
                    <div class="ui-list-info">
                        <h4 class="ui-nowrap">@item.GoodName</h4>
                        <p class="ui-nowrap">@item.Amount 积分</p>
                    </div>
                </li>

            }
        </ul>
    </div>
    <div id="loading" class="ui-loading-block">
        <div class="ui-loading-wrap">
            <div class="ui-loading-cnt">
                <div class="sk-wave">
                    <div class="sk-rect sk-rect1"></div>
                    <div class="sk-rect sk-rect2"></div>
                    <div class="sk-rect sk-rect3"></div>
                    <div class="sk-rect sk-rect4"></div>
                    <div class="sk-rect sk-rect5"></div>
                </div>
                <i>正在加载中...</i>
            </div>
        </div>
    </div>

</div>